<template>
    <div class="passwordRetrieve">
      <b-row class="mt-5">
        <b-col md="" offset-md="2" lg="6" offset-lg="3">
          <b-card title="找回密码" class="text-left">
            <b-form>
              
              <b-form-group label="用户名">
                <b-form-input
                  v-model="$v.user.name.$model"
                  type="text"
                  placeholder="输入您的用户名"
                ></b-form-input>
                <b-form-invalid-feedback :state="validateState('name')">
                  用户名应不小于5位且不大于20位
                </b-form-invalid-feedback>        
              </b-form-group>

              <b-form-group label="手机号">
                <b-form-input
                  v-model="$v.user.telephone.$model"
                  type="number"
                  placeholder="输入您的手机号"
                ></b-form-input>
                <b-form-invalid-feedback :state="validateState('telephone')">
                  手机号格式错误
                </b-form-invalid-feedback>        
              </b-form-group>
    
              <b-form-group>
                <b-button 
                  variant="outline-primary" 
                  @click="passwordRetrieve"
                  block
                >找回密码</b-button>
              </b-form-group>
            </b-form>
          </b-card>
        </b-col>
      </b-row>
    </div>
</template>
    
<script>
import { required, maxLength, minLength } from 'vuelidate/lib/validators'
import customValidator from '@/helper/validator.js'
import requestService from '@/service/requestService'
export default {
  data() {
    return {
      user: {
        name: '',
        telephone: '',
        password:'',
      },
    }
  },
  validations: {
    user: {
      name: {
        required,
        minLength : minLength(5),
        maxLength : maxLength(20),
      },
      telephone : {
        required,
        telephone : customValidator.telephoneValidator,
      },
    }
  },
  methods: {
    validateState(name) {
      const { $dirty, $error } = this.$v.user[name]
      return $dirty? !$error : null
    },
    passwordRetrieve() {
      //验证数据
      this.$v.user.$touch()
        if (this.$v.user.$anyError) {
          return ;
        }
      //请求
      var userRequest = {
        username : this.user.name,
        phoneNumber : this.user.telephone,
        password : '',
      }
      requestService.post('passwordRecover', userRequest).then((res) => {
        this.$bvToast.toast(res.data.password, {
          title: '您的密码为',
          variant: 'info',
          solid: true,
        })
        //this.$router.replace({ name: "login"})
      }).catch((err) => {
        console.log(err)
        this.$bvToast.toast(err.response.data.msg, {
          title: '数据验证错误',
          variant: 'danger',
          solid: true,
        })
      })
    }
  },
}
</script>
    
<style lang="scss" scoped>
    
</style>